<template>
    <div>
        <div>
            <el-row class="titleBackground">
                <el-col :span="16">
                    <el-form inline size="small" style="margin-bottom:-20px">
                        <el-form-item>
                            <el-button size="small" class="title">我的教案</el-button>
                        </el-form-item>

                        <!-- <el-form-item  label="快速查询">
                          <el-input v-model="searchForm.namePhone"/>
                        </el-form-item>

                        <el-form-item>
                          <el-button @click="onSearch">查询</el-button>
                        </el-form-item> -->
                    </el-form>
                </el-col>
            </el-row>

            <swiper :options="swiperOption">
                <swiper-slide v-for="item in courseList">
                    <div class="courselistpic cur" @click="gocoursedetail(item.id)">
                        <img :src="item.imgs|filtersImg" class="imgWidth">
                        <p style="width:100%;text-align:center;">{{item.name}}</p>
                    </div>
                </swiper-slide>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
            <br>
            <el-row class="titleBackground">
                <el-col :span="24">
                    <el-form inline size="small" style="margin-bottom:-20px">
                        <el-form-item>
                            <el-button size="small" class="title">已购课程</el-button>
                        </el-form-item>

                        <!--                         <el-form-item  label="快速查询">-->
                        <!--                          <el-input v-model="searchForm.namePhone"/>-->
                        <!--                        </el-form-item>-->

                        <el-form-item style="float: right">
                            <el-button @click="gogoumai">查看</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <!--            <swiper :options="swiperOption">-->
            <!--                <swiper-slide v-for="item in piclist">-->
            <!--                    <div class="courselistpic cur" @click="gocoursedetail(item.id)">-->
            <!--                        <img :src="item.imgs|filtersImg" class="imgWidth">-->
            <!--                        <p style="width:100%;text-align:center;">{{item.name}}</p>-->
            <!--                    </div>-->
            <!--                </swiper-slide>-->

            <!--                <div class="swiper-button-prev" slot="button-prev"></div>-->
            <!--                <div class="swiper-button-next" slot="button-next"></div>-->
            <!--            </swiper>-->
        </div>

        <!-- <el-dialog title="移除球员" :visible.sync="deleteDialog">
              <el-table
                ref="multipleTable"
                stripe
                :data="selectList"
                style="width: 100%"
              >

              <el-table-column
                v-for="(item, index) in header"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
              />

              </el-table>

              <br>
              <span style="padding:10px;"><strong>是否移除以上球队？</strong></span>
              <el-button size="small" type="primary" @click="onDelete">确定</el-button>
              <el-button size="small" @click="deleteDialog = false">取消</el-button>
        </el-dialog> -->
    </div>
</template>

<script>
    import {mapActions, mapState, coachTraining} from 'vuex'
    import {baseImgPath, basefile} from '@/config/env.js';
    import {teachingPlanedit} from '../../api/api/coach.js';

    const header = [
        {prop: 'name', label: '队名'},
        {prop: 'imgs', label: '分组'},
        {prop: 'age', label: '人数'}
    ]

    export default {
        components: {},
        data() {
            return {
                header,
                addPKDialog: false,
                deleteDialog: false,
                tableList: [],

                options: [
                    {label: '全部', value: 1}
                ],

                searchForm: {
                    courseType: 1,
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                },

                swiperOption: {
                    speed: 1000,
                    slidesPerView: 3,
                    spaceBetween: 100,

                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                },

                piclist: [
                    {imgs: '1', name: '123123'}
                ],
                courseList: [],
                selectList: [],
                searchData: {
                    pageNum: 1,
                    pageSize: 10
                    // id: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
                },
            }
        },

        computed: {
            ...mapState('Login', [
                'userStatus'
            ]),
            dateHeader() {
                const date = this.activeDate
            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'fetchCourseList',
                'fetchCoursePic',
                'getTeachingPlanList',
            ]),

            addCourse() {
                this.$router.push('/coachTraining/lessonDetail')
            },
            gogoumai() {
                this.$router.push('/coachTraining')
            },

            clickDay(val) {
                this.activeDate = new Date(val).valueOf()
            },

            onSearch() {
                this.searchForm.pageNum = 1
                // this.fetchList()
            },
            getList() {
                this.getTeachingPlanList(this.searchData).then(res => {
                    const {code, data: {list}} = res

                    if (code === 200) {
                        this.courseList = list || []
                    }
                })
            },
            fetchList() {
                let id = Number(this.userStatus.statusId)
                let params = {
                    id,
                    pageNum: 1,
                    pageSize: 10
                }
                this.fetchCoursePic(params).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.piclist = list || []
                    }
                })
            },

            selectChange(val) {
                this.selectList = val
                console.log(this.selectList)
            },

            pageChange(val) {
                this.searchForm.pageNum = val
                this.fetchList()
            },
            gocoursedetail(id) {
                var that = this;
                that.$router.push({
                    path: '/coachTraining/lessonDetail',
                    query: {
                        id: id
                    }
                })
            },
            onDelete() {

            }
        },

        created() {
            this.fetchList()
            this.getList()
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        }

    }
</script>

<style scoped>
    .titleBackground {
        padding: 10px;
        background: #f5f7fa;
        border: 1px solid #f7f7f7;
    }

    .imgWidth {
        display: block;
        width: 400px;
    }
</style>

<style>
    .wh_content_all[data-v-2ebcbc83] {
        background-color: #2d64b3;
    }

    .wh_content_item .wh_isToday[data-v-2ebcbc83] {
        background: #254d87;
    }

    .wh_content_item .wh_chose_day[data-v-2ebcbc83] {
        background: #254d87;
    }

    .title {
        background: none;
        border: none;
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .inDetail {
        cursor: pointer;
        color: #2d64b3;
    }

    .SBBZ {
        color: #c60818;
    }

    .courselistpic {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 20px;

    }

    .courselistpic img {
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
    }

    .gocoursedetail {

    }

    .cur {
        cursor: pointer;
    }
</style>



